<!--项目启动--意向申报-->
<template>
  <div style="background: #f5f5f5">
    <div class="intentional-card">
      <div class="card-header">
        <div class="cap-title">意向项目</div>
      </div>
      <div class="card-row-container" @click="showModalPage()">
        <div class="left-icon bg-blue"><i class="el-icon-document" style="font-size: 28px;color: #FFF;"></i></div>
        <div class="rightTitle">
          <div class="mainTitle">意向申报</div>
          <div class="subTitle">登记意向项目信息发起审批流程</div>
        </div>
      </div>
    </div>
    <div class="intentional-card">
      <div class="card-header">
        <div class="cap-title">申报记录</div>
        <div>更多</div>
      </div>
      <div class="card-table">
        <el-table :data="tableData" border style="width: 100%;" @row-click="handleRowClick">
          <el-table-column prop="date" label="申报日期" width="120"></el-table-column>
          <el-table-column prop="depart" label="申报部门" width="260"></el-table-column>
          <el-table-column prop="entryName" label="项目名称"></el-table-column>
          <el-table-column prop="entryType" label="项目类型"></el-table-column>
          <el-table-column prop="responsiblePerson" label="负责人"></el-table-column>
          <el-table-column prop="source" label="资金来源"></el-table-column>
          <el-table-column prop="businessType" label="业务类型"></el-table-column>
          <el-table-column prop="income" label="预计收入"></el-table-column>
          <el-table-column prop="status" label="流程状态"></el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="4"
          style="display: flex;justify-content: end; margin-top:20px">
        </el-pagination>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="60%"
      :close-on-click-modal="false"
      destroy-on-close
      @close="closeModal"
    >
      <inten-declaration :row="selectedRow" :closeModal="closeModal" :ModalType="ModalType"></inten-declaration>
    </el-dialog>
  </div>
</template>

<script>
import intenDeclaration from './components/intentionalDeclaration'
export default {
  name: 'intentionalDeclaration',
  components:{intenDeclaration},
  data(){
    return{
      tableData: [
        {
          date: '2024-06-14',
          depart: '申报部门',
          entryName: '风光一体化防沙治沙',
          entryType: '防沙治沙',
          responsiblePerson: '刘*',
          source: '自筹资金',
          income: '',
          businessType: '意向申报',
          status:'未结束'
        },
        {
          date: '2024-06-14',
          depart: '申报部门',
          entryName: '三北六期',
          entryType: '植树造林',
          responsiblePerson: '王**',
          source: '自筹资金',
          income: '',
          businessType: '意向申报',
          status:'未结束'
        },
        {
          date: '2022-06-14',
          depart: '申报部门',
          entryName: '蚂蚁森林',
          entryType: '绿化改造',
          responsiblePerson: '张*',
          source: '自筹资金',
          income: '180,000.00',
          businessType: '意向申报',
          status:'已结束'
        },
        {
          date: '2024-06-14',
          depart: '申报部门',
          entryName: '蓝旗机器人造林',
          entryType: '机器人造林',
          responsiblePerson: '张**',
          source: '自筹资金',
          income: '155,000.00',
          businessType: '意向申报',
          status:'已结束'
        }
    ],
      currentPage:1,
      dialogVisible:false,
      dialogType:'',
      selectedRow:'',
      ModalType:''
    }
  },
  methods:{
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    showModalPage(){
      this.selectedRow = {};
      this.ModalType = 'add'
      this.dialogVisible=true
    },

    //点击table行弹窗
    handleRowClick(row, column, event){
      this.selectedRow = row;
      this.ModalType = 'edit'
      this.dialogVisible = true;
    },

    //关闭弹窗
    closeModal(){
      this.selectedRow = {};
      this.dialogVisible=false
    }
  }

}
</script>

<style scoped lang="scss">
.intentional-card {
  box-sizing: border-box;
  border-radius: 5px 5px 0 0;
  border: 1px solid #e7eff3;
  box-shadow: 0 0 5px #dde9ef;
  width: 100%;
  color: #555;
  background-color: #fff;
  margin: 10px 6px;

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 45px;
    padding: 10px;
    border-bottom: 1px solid #e7eff3;

    .cap-title {
      color: #11A983;
      border-bottom: 2px solid #11A983;
      cursor: pointer;
      margin: 0 10px 0 0;
    }
  }

  .card-row-container {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 31px 27px;
    border: 1px solid #C2C2C2;
    border-radius: 4px;
    box-sizing: border-box;
    flex-wrap: nowrap;

    .left-icon {
      height: 100%;
      width: 76px;
      display: -ms-flexbox;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      border-radius: 3px 0px 0px 3px;
    }

    .bg-blue {
      background-color: #11A983;
      border: 1px solid #11A983;
    }

    .rightTitle {
      width: calc(100% - 76px);
      height: 100%;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-line-pack: center;
      align-content: center;

      .mainTitle {
        height: 22px;
        width: 100%;
        margin-bottom: 5px;
        padding: 0 14px;
        box-sizing: border-box;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #000;
        line-height: 22px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      .subTitle {
        height: 17px;
        width: 100%;
        padding: 0 14px;
        box-sizing: border-box;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #999;
        line-height: 17px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }

  .card-table {
    padding: 31px 27px;
    height: 100%;
  }


}
.page-img{
  width: 100%;
}


</style>
